<template>
  <div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求"
       element-loading-spinner="el-icon-loading">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
          <address-name :address_name="address_name" @getAddress="getAddress"></address-name>
        </div>
      </template>
      <template #add>
        <div class="opt-item">
          <el-button @click="pushForm" type="primary" size="medium">推送</el-button>
        </div>
      </template>
    </basic-opt>

    <div :class="hasXml ? 'mask' : 'm-close'">
      <el-scrollbar>
        <div class="m-xml-box">
          <div>
            <el-button @click="closeXml" type="info" plain>关闭</el-button>
          </div>
          <div class="m-xml-ctx">
            <el-scrollbar style="width: 100%;">
              <div class="m-xml-ctx-l">
                <pre><code class="xml hljs">{{ tubanuoXml }}</code></pre>
                <!-- <div v-text="tubanuoXml" style="font-size: 16px;"></div> -->
              </div>
            </el-scrollbar>
          </div>
          <div class="m-xml-ctx">
            <el-scrollbar style="width: 100%;">
              <div class="m-xml-ctx-r">
                <div v-for="(item, index) in gonganXml" :key="index">
                  <div style="display: flex; flex-direction: column;">
                    <div style="color: firebrick; font-size: 20px;padding: 10px 0;">
                      {{ item.report }}
                    </div>
                    <div>
                      <pre><code class="xml hljs">{{ item.message }}</code></pre>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div class="g-wrap">
      <el-dialog title="推送" v-model="dialogPush" width="50%" :before-close="closeDialogPush">
        <el-radio-group v-model="form.type" @change="radioChange">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="address">地址</el-radio-button>
          <el-radio-button label="rooms">房间</el-radio-button>
          <el-radio-button label="devices">设备</el-radio-button>
          <el-radio-button label="people">人口</el-radio-button>
        </el-radio-group>
        <div class="m-room-box">
          <address-room :typeRoom="form.type" v-if="form.type == 'rooms'" @getChildRoom="getRooms">
          </address-room>
          <address-room :typeRoom="form.type" v-if="form.type == 'devices'" @getChildRoom="getRooms">
          </address-room>
        </div>
        <div class="m-room-box">
          <address-population :typeFace="form.type" v-if="form.type == 'people'" @getChildFace="getFaces">
          </address-population>
        </div>

        <template #footer>
					<span class="dialog-footer">
						<el-button @click="dialogPush = false">取 消</el-button>
						<el-button type="primary" @click="submitPush">推 送</el-button>
					</span>
        </template>
      </el-dialog>

      <div class="table-box-box">
        <div class="u-tb-item">
          <div class="u-tb-item-l">
						<span>
							地址信息服务状态
						</span>
          </div>
          <div class="u-tb-item-r">
            <el-table :data="addressInfo" border stripe :header-cell-style="header_cell_style"
                      max-height="300">
              <el-table-column prop="address" label="地址"></el-table-column>
              <el-table-column prop="is_transmit" label="状态" width="200px">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row, 'SK010105')"
                             v-show="scope.row.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010105')"
                             v-show="scope.row.is_transmit == '1'" type="success" plain size="mini">已传输
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="u-tb-item">
          <div class="u-tb-item-l">
						<span>
							设备信息服务状态
						</span>
          </div>
          <div class="u-tb-item-r">
            <el-table :data="deviceInfo" border stripe :header-cell-style="header_cell_style"
                      max-height="300">
              <el-table-column prop="device_guid" label="设备ID"></el-table-column>
              <el-table-column prop="room_address" label="房间地址"></el-table-column>
              <el-table-column prop="is_transmit" label="状态" width="200px">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row, 'SK010102')"
                             v-show="scope.row.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010102')"
                             v-show="scope.row.is_transmit == '1'" type="success" plain size="mini">已传输
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="u-tb-item">
          <div class="u-tb-item-l">
						<span>
							轨迹信息服务状态
						</span>
          </div>
          <div class="u-tb-item-r">
            <el-table :data="trajectoryInfo" border stripe :header-cell-style="header_cell_style"
                      max-height="300">
              <el-table-column prop="id" label="ID"></el-table-column>
              <el-table-column prop="is_transmit" label="状态" width="200px">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row, 'SK010103')"
                             v-show="scope.row.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010103')"
                             v-show="scope.row.is_transmit == '1'" type="success" plain size="mini">已传输
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="u-tb-item">
          <div class="u-tb-item-l">
						<span>
							人口信息服务状态
						</span>
          </div>
          <div class="u-tb-item-r">
            <el-table :data="populationInfo" border stripe :header-cell-style="header_cell_style"
                      max-height="300">
              <el-table-column prop="face.name" label="名字"></el-table-column>
              <el-table-column prop="face.is_transmit" label="人脸状态">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row, 'SK010101')"
                             v-show="scope.row.face.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010101')"
                             v-show="scope.row.face.is_transmit == '1'" type="success" plain size="mini">
                    已传输
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column prop="is_transmit" label="人口状态">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row, 'SK010100')"
                             v-show="scope.row.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010100')"
                             v-show="scope.row.is_transmit == '1'" type="success" plain size="mini">已传输
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="u-tb-item">
          <div class="u-tb-item-l">
						<span>
							房间信息服务状态
						</span>
          </div>
          <div class="u-tb-item-r">
            <el-table :data="roomInfo" border stripe :header-cell-style="header_cell_style" max-height="300">
              <el-table-column prop="room_address" label="房间地址"></el-table-column>
              <el-table-column prop="is_transmit" label="状态" width="200px">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row, 'SK010106')"
                             v-show="scope.row.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010106')"
                             v-show="scope.row.is_transmit == '1'" type="success" plain size="mini">已传输
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="u-tb-item">
          <div class="u-tb-item-l">
						<span>
							图像信息服务状态
						</span>
          </div>
          <div class="u-tb-item-r">
            <el-table :data="imageInfo" border stripe :header-cell-style="header_cell_style" max-height="300">
              <el-table-column prop="device_guid" label="设备号"></el-table-column>
              <el-table-column prop="is_transmit" label="状态" width="200px">
                <template #default="scope">
                  <el-button @click="viewDetail(scope.row,'SK010104')"
                             v-show="scope.row.is_transmit == '0'" type="info" plain size="mini">未传输
                  </el-button>
                  <el-button @click="viewDetail(scope.row, 'SK010104')"
                             v-show="scope.row.is_transmit == '1'" type="success" plain size="mini">已传输
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="use-computer">请用电脑进行查看</div>
  </div>
</template>

<script>
import API from '@/api/index.js'
import vkbeautify from 'vkbeautify'
import AddressRoom from '@/components/form/address-room.vue'
import AddressPopulation from '@/components/form/address-population.vue'
import AddressName from '@/components/address/address-name.vue'



export default {
  name: 'room',
  components: {
    AddressRoom,
    AddressPopulation,
    AddressName
  },
  data() {
    return {
      loading: false,
      address_name: '',
      address_id: '', // 地址id
      addressInfo: [],
      deviceInfo: [],
      roomInfo: [],
      populationInfo: [],
      trajectoryInfo: [],
      imageInfo: [],
      tubanuoXml: '',
      gonganXml: '',
      hasXml: false,
      dialogPush: false,
      form: {
        address_id: '',
        type: '',
        rooms: [],
        faces: []
      },
      header_cell_style: {
        background: '#003366',
        color: '#fff'
      },
    }
  },
  mounted() {
    this.address_id = localStorage.getItem('address_id') ? localStorage.getItem('address_id') : '';
    this.address_name = localStorage.getItem('address_name') ? localStorage.getItem('address_name') : '';
    this.form.address_id = localStorage.getItem('address_id') ? Number(localStorage.getItem('address_id')) : '';
    if (this.address_id) {
      this.getInfoDetail();
    }
    window.location.hash = "#/service-detail?address_id=" + this.address_id;
  },
  watch: {
    hasXml(val) {
      val ? document.documentElement.style.overflowY = 'hidden' : document.documentElement.style.overflowY =
          'auto';
    }
  },
  methods: {
    getAddress(val) {
      let self = this;
      localStorage.setItem('address_id', val.addressData.id);
      localStorage.setItem('address_name', val.addressData.address);
      self.$nextTick(function () {
        self.address_id = val.addressData.id;
        self.form.address_id = val.addressData.id;
        window.location.hash = "#/service-detail?address_id=" + self.address_id;
        self.getInfoDetail();
      });
    },
    getInfoDetail() {
      let self = this;
      self.loading = true;
      API.addressInfoService(this.address_id).then(res => {
        let data = res.data.data;
        self.loading = false;
        self.addressInfo = data.addressState;
        self.deviceInfo = data.deviceState;
        self.roomInfo = data.roomState;
        self.populationInfo = data.multiFaceState;
        self.trajectoryInfo = data.logs;
        self.imageInfo = data.photos;
      }).catch(err => {
        self.loading = false;
        self.$message.error(err.response.data.message)
      })
    },
    radioChange() {
      let self = this;
      self.form.address_id = '';
      self.form.rooms = [];
      self.form.faces = [];
    },
    // 获取选中的房间
    getRooms(data) {
      let self = this;
      self.form.rooms = data.allRoom;
    },
    // 选中的人口
    getFaces(data) {
      let self = this;
      self.form.faces = data.allFace;
    },
    // 推送
    pushForm() {
      let self = this;
      self.dialogPush = true;
    },
    submitPush() {
      let self = this;
      self.form.address_id = self.address_id;
      console.log(self.form)
      API.pushAddress(self.form).then(res => {
        console.log(res)
        self.$message.success("推送成功");
        self.dialogPush = false;
        self.form = {
          address_id: '',
          type: '',
          rooms: [],
          faces: []
        }
      })
    },
    closeDialogPush() {
      let self = this;
      self.dialogPush = false;
      self.form = {
        address_id: '',
        type: '',
        rooms: [],
        faces: []
      }
    },
    closeXml() {
      let self = this;
      self.hasXml = false;
    },
    viewDetail(row, type) {
      let self = this;
      self.loading = true;
      self.tubanuoXml = '';
      self.gonganXml = '';
      switch (type) {
        case 'SK010105':
          self.getStatus(type, row.id);
          break;
        case 'SK010106':
          self.getStatus(type, row.room_id);
          break;
        case 'SK010104':
          self.getStatus(type, row.id);
          break;
        case 'SK010103':
          self.getStatus(type, row.id);
          break;
        case 'SK010102':
          self.getStatus(type, row.device_id);
          break;
        case 'SK010101':
          self.getStatus(type, row.face.id);
          break;
        case 'SK010100':
          self.getStatus(type, row.id);
          break;
      }
    },
    getStatus(val, id) {
      let self = this;
      API.addressTransmitDetail(val, id).then(res => {
        if (res.data.data) {
          let data = res.data.data;
          self.tubanuoXml = vkbeautify.xml(data.content);
          self.gonganXml = data.reports ? data.reports : '';
          self.loading = false;
          self.hasXml = true;
        } else {
          self.loading = false;
          self.$message.error("暂无信息");
        }
      }).catch(err => {
        self.loading = false;
        self.$message.error(err.response.data.message)
      });
    }
  },
  beforeUnmount() {
    localStorage.removeItem('address_name');
    localStorage.removeItem('address_id');
  }
}
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 999;

  .m-xml-box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;

    .m-xml-ctx {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
      width: 100vw;

      .m-xml-ctx-l,
      .m-xml-ctx-r {
        width: 95%;
        padding: 20px;
        background-color: #f0f0f0;
      }
    }
  }
}

.m-room-box {
  margin: 20px 0;
}

.m-top {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 8px;
  background-color: #f0f0f0;

  .m-box {
    margin-right: 10px;
  }
}

.table-box-box {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-around;
  margin: 1%;
  box-sizing: border-box;

  .u-tb-item {
    display: flex;
    flex-direction: column;
    width: 47%;
    margin: 1%;
    border: 1px #ccc solid;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #888888;

    .u-tb-item-l {
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
      font-weight: bold;
    }

    .u-tb-item-r {
      padding: 20px;
    }
  }
}


.m-close {
  display: none;
}
</style>
